<template>
    <div class="box1" >
        <div>
            <el-card shadow="always" class="box-card">
                <el-row :gutter="20">
                    <el-col :span="3" :offset="1"><div class="grid-content bg-purple"><span>课程评论</span></div></el-col>
                    <el-col :span="9" :offset="11">
                        <div class="grid-content bg-purple">
                            <el-button size="mini">刷新</el-button>
                            <el-button size="mini">返回</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <el-container>
            <el-main >
                <el-card shadow="always">
                    <div class="box3">
                        <!-- 模糊查 -->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <div class="dim_check">
                                <el-collapse accordion>
                                    <el-collapse-item>
                                        <template slot="title">
                                            <i style="font-size: 25px;" class="el-icon-search"></i>
                                            <!--										<el-form-item>-->
                                            <div style="margin-left: 85%">
                                                <el-button type="primary" @click.stop="onSubmit">查询</el-button>
                                            </div>
                                            <!--										</el-form-item>-->
                                        </template>
                                        <div>
                                            <el-form-item label="输入搜索" style="font-size: 20px; font-weight:bold">
                                                <el-input v-model="formInline.content" placeholder="请输入评价关键字"></el-input>
                                            </el-form-item>
                                            <el-form-item label="用户账号" style="font-size: 20px; font-weight:bold">
                                                <el-input v-model="formInline.account" placeholder="请输入用户账号"></el-input>
                                            </el-form-item>
                                            <el-form-item label="用户昵称" style="font-size: 20px; font-weight:bold">
                                                <el-input v-model="formInline.trueName" placeholder="请输入用户昵称"></el-input>
                                            </el-form-item>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-form>
                        <!-- 数据表格 -->
                        <div>
                            <div style="background-color: #F3F3F3  ;height: 35px" >
                                <span style="float:left;"><i style="font-size: 25px;" class="el-icon-s-unfold"></i>课程评论列表</span>
                            </div>
                            <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                                <el-table-column type="selection" >

                                </el-table-column>
                                <el-table-column align="center" prop="commentId" label="编号" >

                                </el-table-column>
                                <el-table-column align="center" prop="trueName" label="用户昵称" >

                                </el-table-column>
                                <el-table-column align="center" prop="courseName" label="课程名称" >

                                </el-table-column>
                                <el-table-column align="center" prop="content" label="评价" >

                                </el-table-column>
                                <el-table-column align="center" prop="commentDate" label="评价时间" >

                                </el-table-column>
                                <el-table-column align="center" prop="account" label="用户账号" >

                                </el-table-column>
                                <el-table-column fixed="right" label="操作" >
                                    <template slot-scope="scope">
                                        <!--@click="upd(scope.$index, tableData)"-->
                                        <el-button  type="text" size="small"><!--				路由拼接拿取id	:to="`/commentdetails/${scope.row.microcircleId}`					-->
                                            <router-link :to="`/coursecommentdetails/${scope.row.id}`">查看</router-link>

                                        </el-button>
                                        <el-button
                                                @click.native.prevent="del(scope.row.id,scope.row)"
                                                type="text"
                                                size="small">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页 -->
                            <div>
                                <el-pagination align='center'
                                               @size-change="handleSizeChange"
                                               @current-change="handleCurrentChange"
                                               :current-page="currentPage"
                                               :page-sizes="[1,5,10,20]"
                                               :page-size="pageSize"
                                               layout="total, sizes, prev, pager, next, jumper"
                                               :total="tableData.length">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "CourseComment",
        data() {
            return {
                tableData: [],//数据表格
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                formInline: {
                    content: '',
                    trueName: '',
                    account:''
                },
            };
        },
        methods: {
            //删除按钮事件
            del(id,row) {
                this.$confirm('确认删除'+row.trueName+'的评论, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get("/Comment/delJsComment",{
                        params:{
                            "id":id
                        },
                    }).then(res=>{
                        this.$router.go(0);

                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 模糊查询事件
            onSubmit() {
                //获取表格里面的数据
                this.$http.get("/Comment/getJsComment",{
                    params:{
                        content:this.formInline.content,
                        trueName:this.formInline.trueName,
                        account:this.formInline.account
                    },
                }).then(res=>{
                    console.log(res.data)
                    this.tableData=res.data.comment

                })
            },

            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {

                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {

                this.currentPage = val;
            },
        },
        created(){//调取方法
            this.onSubmit();
        },
    }
</script>

<style scoped>

</style>